<template>
  <div class="">
    <div>
      <swiper
        class="swiper"
        :indicator-dots="indicatorDots"
        :indicator-color="'rgba(255, 255, 255, 0.3)'"
        :indicator-active-color="'rgba(255, 255, 255, 0.9)'"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
        :loop="true"
      >
          <block v-for="(item, index) in SwiperImages" :key="index">
              <swiper-item>
                  <image :src="item.url" class="slide-image" mode="scaleToFill"/>
              </swiper-item>
          </block>
      </swiper>
    </div>
    <HomeList></HomeList>
    <hotList :hotSearchList="hotSearchList"></hotList>
    <div v-for="item in recommendList" :key="item.id">
      <recommend
        :userImg="item.userImg"
        :userName="item.userName"
        :describe="item.describe"
        :goodsImg="item.goodsImg"
        :title="item.title"
        :content="item.content"
      ></recommend>
    </div>
  </div>
</template>

<script>
import HomeList from './HomeList'
import hotList from './hotList'
import recommend from './recommend'
export default {
  props: {
    SwiperImages: {
      type: Array,
      default: []
    },
    hotSearchList: {
      type: Array,
      default: []
    },
    recommendList: {
      type: Array,
      default: []
    }
  },
  components: {
    HomeList,
    hotList,
    recommend
  },
  data () {
    return {
      indicatorDots: true,
      autoplay: true,
      interval: 3000,
      duration: 500
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper {
  margin: 0 auto;
  margin-top: 15px;
  height: 220px !important;
  overflow: hidden;
  width: 98%;
  border-radius: 18px;
  image {
    height: 100%;
    width: 100%;
  }
}
</style>
